iT邦幫忙

第 12 屆 iThome 鐵人賽

0
Modern Web

JavaScript 從零開始系列 第 32

JavaScript 從零開始 - Day32- 事件監聽 addEventListener

  • 分享至 

  • xImage
  •  

JavaScript Note

在 HTML 標籤寫入 onclick() 事件

在 addEventListener 的寫法出現前,是在 HTML 的標籤內直接寫入事件,假如要寫入一個 click 事件,會這樣寫:

<input type="button"  onclick="clickBtn()" class="button" value="CLICK">

就像在 input 標籤上直接加入一個 function,再透過 JS 把這個 function 內容寫出來:

function clickBtn() {
  alert("hello world!");
}

點擊 button 的時候,就會出現彈跳視窗。

CodePen: https://codepen.io/hnzxewqw/pen/xxGgmXV

不過這是比較舊的寫法,至今還有人這樣寫,也沒什麼不對,那現在前端為了避免 XSS 攻擊事件,所以都盡量不在 HTML 標籤上寫上 script 相關標籤,以免被埋入程式碼。

關於 XSS 攻擊事件

addEventListener 的寫法

比較新的新增事件的寫法如下:

<input type="button" value="CLICK" class="button">

對比之下,少了 onclick 這個事件在標籤上,但使用選取器 querySelector 的方式,變成下方程式碼寫法:

var button = document.querySelector(".button");
button.addEventListener(
  "click",
  function () {
    alert("HELLO WORLD!");
  },
  false
);

所呈現出來的結果是相同的。

CodePen: https://codepen.io/hnzxewqw/pen/OJVWrQE

監聽事件 addEventListener

這邊使用一個按鈕,在點擊時會產生監聽事件:

 <input type="button" value="CLICK" class="button">

要在 button 上新增一個監聽事件時,JS 的起手式是這樣:

var el = document.querySelector(".button");
el.addEventListener("click", function () {}, false);

說明:
在選取的元素中新增事件時,後面的參數是要這樣寫,

  1. 選擇要出現的事件,事件有很多種,不只是 click,可能還有 hover 也是,但 click 滿常使用的。

  2. 中間為匿名 function,帶入要出現的功能。

  3. 布林值,決定要不要產生冒泡事件,如果不指定,會自動產生冒泡事件。

    • false (冒泡事件 Event Bubbling): 從指定的元素往外找 (預設為 false)
    • true (捕獲事件 Event Capturing): 從最外層找到指定元素

onclick 與 addEventListener 的差別

  • onclick 無法綁定兩個事件

  • addEventListener 可以綁定多個事件

用程式碼來舉例,下面有兩個按鈕,分別為 btnA 跟 btnB,HTML 如下:

  <input type="button" value="btnA" class="btnA">
  <input type="button" value="btnB" class="btnB">

這邊兩個監聽事件都做兩個 alert 來測試效果,

// onclick 效果
var btnA = document.querySelector(".btnA");
btnA.onclick = function () {
  alert("AA-1");
};

btnA.onclick = function () {
  alert("AA-2");
};

//addEventListener效果
var btnB = document.querySelector(".btnB");
btnB.addEventListener(
  "click",
  function () {
    alert("BB-1");
  },
  false
);
btnB.addEventListener(
  "click",
  function () {
    alert("BB-2");
  },
  false
);

透過 CodePen 測試可以看到,onclick 只能讀取到第二個 alert 事件,無法綁定多個,而 addEventListener 可以綁定多個 alert 事件。

CodePen: https://codepen.io/hnzxewqw/pen/wvagLQq


上一篇
JavaScript 從零開始 - Day31- 認識 Event 事件
下一篇
JavaScript - 從零開始 - Day32 - 終止冒泡事件 stopPropagation 與 取消預設觸發行為 preventDefault
系列文
JavaScript 從零開始40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
c2838
iT邦新手 5 級 ‧ 2024-04-18 15:12:57

謝謝您的文章,寫得清楚明瞭,很有幫助~

Tim Hsu iT邦新手 1 級 ‧ 2024-04-29 13:34:07 檢舉

很高興可以幫助到您~

我要留言

立即登入留言